<template>
    <a-card :bordered="false">
        <div class="card-title">{{ $route.meta.title }}</div>
        <a-spin :spinning="isLoading">
            <a-form :form="form" @submit="handleSubmit">
                <a-form-item class="mb-20" label="短信平台" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-radio-group v-decorator="['default', { rules: [{ required: true }] }]" @change="onChangeEngine">
                        <a-radio v-for="(engine, index) in record.engine" :key="index" :value="index">
                            <span>{{ engine.name }}{{index}}</span>
                            <a-tag v-if="index === 'aliyun'" class="ml-5" color="green">推荐</a-tag>
                        </a-radio>
                    </a-radio-group>

                    <div v-if="form.getFieldValue('default')" class="form-item-help">
                        <small>短信平台管理地址：</small>
                        <a :href="record.engine[form.getFieldValue('default')].website" target="_blank">{{ record.engine[form.getFieldValue('default')].website }}</a>
                    </div>
                </a-form-item>

                <!-- 阿里云配置 -->
                <div v-show="form.getFieldValue('default') === 'aliyun'">
                    <a-form-item label="AccessKeyId" :labelCol="labelCol" :wrapperCol="wrapperCol" required>
                        <a-input v-decorator="[`engine.aliyun.accessKeyId`]" />
                    </a-form-item>
                    <a-form-item label="AccessKeySecret" :labelCol="labelCol" :wrapperCol="wrapperCol" required>
                        <a-input v-decorator="[`engine.aliyun.accessKeySecret`]" />
                    </a-form-item>
                    <a-form-item label="短信签名 Sign" :labelCol="labelCol" :wrapperCol="wrapperCol" required>
                        <a-input v-decorator="[`engine.aliyun.sign`]" />
                    </a-form-item>
                </div>
                <!-- 腾讯云配置 -->
                <div v-show="form.getFieldValue('default') === 'qcloud'">
                    <a-form-item label="SdkAppID" :labelCol="labelCol" :wrapperCol="wrapperCol" required>
                        <a-input v-decorator="[`engine.qcloud.sdkAppID`]" />

                    </a-form-item>
                    <a-form-item label="AccessKeyId" :labelCol="labelCol" :wrapperCol="wrapperCol" required>
                        <a-input v-decorator="[`engine.qcloud.accessKeyId`]" />
                    </a-form-item>
                    <a-form-item label="AccessKeySecret" :labelCol="labelCol" :wrapperCol="wrapperCol" required>
                        <a-input v-decorator="[`engine.qcloud.accessKeySecret`]" />
                    </a-form-item>
                    <a-form-item label="短信签名 Sign" :labelCol="labelCol" :wrapperCol="wrapperCol" required>
                        <a-input v-decorator="[`engine.qcloud.sign`]" />
                    </a-form-item>
                </div>
                <!-- 七牛云配置 暂不考虑 -->
                <!-- <div v-show="form.getFieldValue('default') === 'qiniu'">
                    <a-form-item label="AccessKey" :labelCol="labelCol" :wrapperCol="wrapperCol" required>
                        <a-input v-decorator="[`engine.qiniu.accessKey`]" />
                    </a-form-item>
                    <a-form-item label="SecretKey" :labelCol="labelCol" :wrapperCol="wrapperCol" required>
                        <a-input v-decorator="[`engine.qiniu.secretKey`]" />
                    </a-form-item>
                </div> -->

                <!-- 短信场景配置 -->
                <div v-for="(item, index) in record['scene']" :key="index">
                    <a-divider orientation="left">{{ item.name }}</a-divider>
                    <a-form-item label="是否开启" :labelCol="labelCol" :wrapperCol="wrapperCol">
                        <a-radio-group v-decorator="[`scene.${index}.isEnable`, { rules: [{ required: true }] }]">
                            <a-radio :value="true">开启</a-radio>
                            <a-radio :value="false">关闭</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    <a-form-item label="模板内容" :labelCol="labelCol" :wrapperCol="wrapperCol" required>
                        <span>{{ record.scene[index].contentPractical }}</span>
                    </a-form-item>
                    <a-form-item label="模板ID/Code" :labelCol="labelCol" :wrapperCol="wrapperCol" required>
                        <a-input v-decorator="[`scene.${index}.templateCode`]" />
                        <div class="form-item-help">
                            <small>例如：SMS_139800030</small>
                        </div>
                    </a-form-item>
                    <a-form-item v-if="record.scene[index].acceptPhone !== undefined" label="接收手机号" :labelCol="labelCol" :wrapperCol="wrapperCol" required>
                        <a-input v-decorator="[`scene.${index}.acceptPhone`]" />
                        <!-- <div class="form-item-help">
              <small>
                注：如需填写多个手机号，请用英文逗号
                <a-tag>,</a-tag>隔开
              </small>
            </div>-->
                    </a-form-item>
                </div>
                <a-form-item :wrapper-col="{ span: wrapperCol.span, offset: labelCol.span }">
                    <a-button type="primary" html-type="submit">提交</a-button>
                </a-form-item>
            </a-form>
        </a-spin>
    </a-card>
</template>

<script>
import { pick, omit } from 'lodash'
import { isEmpty } from '@/utils/util'
import * as Api from '@/api/setting/storesetting'
import SettingSmsSceneEnum from '@/common/enum/setting/sms/Scene'

export default {
    data() {
        return {
            SettingSmsSceneEnum,
            // 当前设置项的key
            key: 'sms',
            // 标签布局属性
            labelCol: { span: 3 },
            // 输入框布局属性
            wrapperCol: { span: 10 },
            // loading状态
            isLoading: false,
            // 当前表单元素
            form: this.$form.createForm(this),
            // 当前记录详情
            record: {},
        }
    },
    // 初始化数据
    created() {
        // 获取当前详情记录
        this.getDetail()
    },
    methods: {
        // 获取当前详情记录
        getDetail() {
            this.isLoading = true

            Api.GetDetail({ key: this.key })
                .then((res) => {
                    // 当前记录
                    this.record = res.result
                    // 设置默认值
                    this.setFieldsValue()
                })
                .finally((result) => {
                    this.isLoading = false
                })
        },

        // 切换短信平台事件
        onChangeEngine(e) {
            const app = this
            const engine = e.target.value
            for (const index in app.record.scene) {
                const item = app.record.scene[index]
                item.contentPractical = app.onVsprintf(
                    item.content,
                    item.variables[engine]
                )
            }
        },

        // 解析短信内容变量, 生成完整的模板内容
        onVsprintf(str, variables) {
            const reg = new RegExp('%s')
            for (var i = 0; i < variables.length; i++) {
                str = str.replace(reg, variables[i])
            }
            return str
        },

        /**
         * 设置默认值
         */
        setFieldsValue() {
            const app = this
            const { record, $nextTick, form } = app
            !isEmpty(form.getFieldsValue()) &&
                $nextTick(() => {
                    const scene = {}
                    for (const index in record.scene) {
                        const item = record.scene[index]
                        const contentPractical = app.onVsprintf(
                            item.content,
                            item.variables[record.default]
                        )
                        app.$set(item, 'contentPractical', contentPractical)
                        scene[index] = pick(item, [
                            'isEnable',
                            'templateCode',
                            'acceptPhone',
                        ])
                    }
                    const engine = {}
                    for (const index in record.engine) {
                        engine[index] = omit(record.engine[index], [
                            'name',
                            'website',
                        ])
                    }
                    form.setFieldsValue({
                        default: record.default,
                        engine,
                        scene,
                    })
                })
        },

        /**
         * 确认按钮
         */
        handleSubmit(e) {
            e.preventDefault()
            // 表单验证
            const {
                form: { validateFields },
            } = this
            validateFields((errors, values) => {
                // 提交到后端api
                !errors && this.onFormSubmit(values)
            })
        },

        /**
         * 提交到后端api
         */
        onFormSubmit(values) {
            this.isLoading = true
            Api.addOrUpdate({ key: this.key, data: values })
                .then((result) => {
                    // 显示提示信息
                    this.$message.success(result.message, 1.5)
                })
                .finally((result) => {
                    this.isLoading = false
                })
        },
    },
}
</script>
<style lang="less" scoped>
.ant-form-item {
    margin-bottom: 10px;
}
/deep/.ant-form-item-control {
    padding-left: 10px;

    .ant-form-item-control {
        padding-left: 0;
    }
}
.ant-divider {
    margin-top: 50px !important;
}
</style>
